<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      type="text/css"
      href="./Cesium/Widgets/widgets.css"
    />
    <script type="text/javascript" src="./cesium/Cesium.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="cesiumcontainer" style="width: 100vw; height: 100vh"></div>

    <script>
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZTgxOGNhZC03NThmLTQ0NzMtOTNlYS1kNmM3YzlmZDU3NTMiLCJpZCI6MTI1NTY3LCJpYXQiOjE2NzY5MDI0MzJ9.ulIEz3NCh2cMEBiHrqIuv9I6icn5KTMMnBdy2wassoM";
      var viewer = new Cesium.Viewer("cesiumcontainer", {
        // 生成地形
        terrainProvider: Cesium.createWorldTerrain(),
        requestRenderMode: true, // 显示渲染
        maximumRenderTimeChange: Infinity,
      });
      let imageryLayers = viewer.imageryLayers;
      // 移出底图
      imageryLayers.removeAll();
      imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f69df935f2b4e5d06629d91c56be2809",
          format: "image/png",
          layer: "",
          style: "",
          tileMatrixSetID: "",
        })
      );
      imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f69df935f2b4e5d06629d91c56be2809",
          format: "image/png",
          layer: "",
          style: "",
          tileMatrixSetID: "",
        })
      );
      /*
    // 加载倾斜示范数据
    var palaceTileset = new Cesium.Cesium3DTileset({
      url: 'http://127.0.0.1:8080/5_HongKongAll/LAS_5/tileset.json',
    })
    palaceTileset.readyPromise.then(function (palaceTileset) {
      viewer.scene.primitives.add(palaceTileset);
      const position_params = {
        tx: 114.1314395,
        ty: 22.5404925, //模型中心Y轴坐标（纬度，单位：十进制度）
        tz: 0, //模型中心Z轴坐标（高程，单位：米）
        rx: 0, //X轴（经度）方向旋转角度（单位：度）
        ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
        rz: 182.5 //Z轴（高程）方向旋转角度（单位：度）
      };
      update3dtilesMaxtrix(palaceTileset, position_params);
      // 控制模型的位置
      function update3dtilesMaxtrix(tileset, position_params) {
        //旋转
        var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(position_params.rx));
        var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(position_params.ry));
        var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(position_params.rz));
        var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
        //平移
        var position = Cesium.Cartesian3.fromDegrees(position_params.tx, position_params.ty, position_params.tz);
        var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        //旋转、平移矩阵相乘
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);
        //赋值给tileset
        tileset._root.transform = m;
      }
      // 定位到三维模型
      viewer.zoomTo(palaceTileset);
    });

    var temp;

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
      // 在这里处理单击事件
      var pickedObject = viewer.scene.pick(movement.position);
      if (temp) temp.detail.model.color = undefined;
      pickedObject.detail.model.color = Cesium.Color.RED;  // 改变颜色
      temp = pickedObject
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    */
    </script>
  </body>
</html>
